<template>
  <van-dialog :show="show" :title="lang.dep_dialog_title" destroyOnClose className="custom-dialog"
    :showConfirmButton="false" :showCancelButton="true" teleport="body" @cancel="beforeClose">
    <div class="dialog-content">
      <div class="deposit-container">
        <!-- 存款信息部分 -->
        <div v-if="!showPaymentResult" class="deposit-section">
          <div class="deposit-header">
            <NuxtImg class="payment-icon" src="/images/carteira/pix.png" :alt="lang.payment_method" />
            <div class="amount-display">
              <span class="currency">{{ userStore.moneyUnit }}</span>
              <span class="amount">{{ formData.payNum }}</span>
            </div>
          </div>

          <div class="payment-content">
            <p class="payment-instruction">{{ lang.payment_instruction }}</p>

            <div class="qr-container">
              <!-- 二维码组件 -->
              <div class="qr-code">
                <qrcode-vue :value="depositData.qrCode" :margin="2" render-as="svg" />
              </div>
              <p class="copy-instruction">{{ lang.copy_pix_code }}</p>
              <button class="copy-button" @click="copyPixCode" v-click-move>
                {{ lang.copy_pix_button }}
              </button>
            </div>

            <div class="payment-steps">
              <h4 class="steps-title">{{ lang.how_to_pay }}</h4>
              <p class="steps-description">{{ lang.payment_steps }}</p>
            </div>
          </div>
        </div>

        <!-- 支付结果回调部分 -->
        <div v-if="showPaymentResult" class="payment-result">
          <h3 class="result-title">{{ lang.payment_result }}</h3>

          <div class="order-info">
            <p class="order-number">
              {{ lang.order_number }}: {{ depositData.orderNumber }}
            </p>
            <button class="copy-order-btn" v-click-move @click="copyOrderNumber">
              <NuxtImg src="/images/layout/icon-copy.png" :alt="lang.copy_alt" class="copy-icon" />
            </button>
          </div>

          <div class="status-indicator success" @click="refreshPayment">
            <NuxtImg src="/images/layout/icon-refresh2.png" :alt="lang.refresh_alt" class="status-icon"
              :class="{ refreshing: isRefresh }" />
          </div>

          <div class="status-messages">
            <p class="status-primary">{{ lang.order_processing }}</p>
            <p class="status-secondary">{{ lang.third_party_payment }}</p>
          </div>

          <button class="refresh-button" v-click-move @click="refreshPayment">
            {{ lang.refresh_button }}
          </button>
        </div>
      </div>
    </div>
  </van-dialog>
</template>

<script setup lang="ts">
import QrcodeVue from "qrcode.vue";

const lang: any = getCurrentPageLang("carteira");

const props = defineProps(["show", "formData"]);


// TODO 成功会回调success函数
const emit = defineEmits(["close", 'success']);

const userStore = useUserStore();

// 存款数据
const depositData: any = ref({});

// 显示支付结果
const showPaymentResult = ref(false);

// 复制PIX代码
const copyPixCode = () => {
  copyText(depositData.value.qrCode);
};

// 复制订单号
const copyOrderNumber = () => {
  // 这里可以添加复制到剪贴板的逻辑
  copyText(depositData.value.orderNumber);
};

// 刷新支付状态
const isRefresh = ref(false);
const refreshPayment = () => {
  if (isRefresh.value) return;
  isRefresh.value = true;
  setTimeout(() => {
    isRefresh.value = false;
  }, 2000);
};

const beforeClose = () => {
  if (showPaymentResult.value) {
    emit("close");
  } else {
    showPaymentResult.value = true;
  }
};

// 初始化
watch(
  () => props.show,
  (newVal) => {
    if (!newVal) return;
    initData();
  }
);
function initData() {
  showPaymentResult.value = false;
  depositData.value = {
    qrCode: "123456",
    orderNumber: "20250818005528683821",
  };
}
</script>

<style scoped lang="scss">
.dialog-content {
  min-height: 1rem;
  max-height: 70vh;
  overflow-y: scroll;
  background: linear-gradient(to bottom,
      var(--theme-ts1-gradient1),
      var(--theme-ts1-gradient2));
  display: flex;
  justify-content: center;
  padding-bottom: 0.5rem;
}

.deposit-container {
  position: relative;
  padding-top: 0.25rem;
  width: 9rem;
  box-sizing: border-box;
}

.deposit-section {
  .deposit-header {
    height: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--theme-color3);
    box-sizing: border-box;
    padding: 0 0.4rem;

    .payment-icon {
      width: 2.23rem;
    }

    .amount-display {
      display: flex;
      align-items: center;
      color: var(--theme-dec4);
      font-size: 0.44rem;
      font-weight: 800;
      gap: 0.06rem;

      .currency {
        margin-left: 0.1rem;
      }

      .amount {
        margin-left: 0.1rem;
      }
    }
  }

  .payment-content {
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.34rem;
    color: var(--theme-neutral1);
    line-height: 0.4rem;
    font-weight: 300;
    padding: 0.4rem;
    padding-top: 0;
    text-align: center;

    .payment-instruction {
      width: 100%;
      font-size: 0.34rem;
      font-weight: 100;
    }

    .qr-container {
      background: var(--theme-color3);
      padding: 0.55rem 0.4rem;
      border-radius: 0.2rem;

      .qr-code {
        display: inline-block;
        width: 3.6rem;
        height: 3.6rem;
        border-radius: 0.2rem;
        overflow: hidden;

        svg {
          width: 100% !important;
          height: 100% !important;
        }
      }

      .copy-instruction {
        margin-top: 0.4rem;
        width: 100%;
        font-size: 0.34rem;
        font-weight: 100;
      }

      .copy-button {
        cursor: pointer;
        width: 4.2rem;
        height: 1rem;
        line-height: 1rem;
        border-radius: 3rem;
        text-align: center;
        font-size: 0.38rem;
        font-weight: 700;
        background: var(--theme-dec4);
        color: var(--theme-dec5);
        margin: 0.25rem auto 0;
        border: none;
      }
    }

    .payment-steps {
      .steps-title {
        font-size: 0.38rem;
        color: var(--theme-neutral2);
        margin-bottom: 0.2rem;
      }

      .steps-description {
        color: var(--theme-neutral2);
        width: 100%;
        font-size: 0.34rem;
        font-weight: 100;
      }
    }
  }
}

.payment-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0.4rem;

  .result-title {
    margin-bottom: 0.3rem;
    font-size: 0.34rem;
    font-weight: 600;
    color: var(--theme-neutral1);
  }

  .order-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.3rem 0.4rem;
    box-sizing: border-box;
    height: 1.2rem;
    background: var(--theme-color9);
    border-radius: 0.2rem;
    border: 0.03rem solid var(--theme-color8);

    .order-number {
      font-size: 0.32rem;
      color: var(--theme-neutral1);
    }

    .copy-order-btn {
      cursor: pointer;
      background: none;
      border: none;
      margin-left: 0.3rem;

      .copy-icon {
        width: 0.5rem;
        vertical-align: middle;
      }
    }
  }

  .status-indicator {
    margin: 0.6rem 0;
    border-radius: 50%;
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;

    &.success {
      background-color: rgb(111, 205, 126);
    }

    .status-icon {
      width: 1rem;
    }
  }

  .status-messages {
    display: flex;
    flex-direction: column;
    padding: 0 0.25rem;
    gap: 0.3rem;

    .status-primary {
      font-size: 0.34rem;
      color: var(--theme-neutral2);
      text-align: center;
      line-height: 0.45rem;
    }

    .status-secondary {
      font-size: 0.38rem;
      color: var(--theme-neutral1);
      text-align: center;
      line-height: 0.4rem;
    }
  }

  .refresh-button {
    cursor: pointer;
    width: 4.2rem;
    height: 1rem;
    line-height: 1rem;
    border-radius: 3rem;
    text-align: center;
    font-size: 0.38rem;
    font-weight: 700;
    background: var(--theme-dec4);
    color: var(--theme-dec5);
    margin: 0.4rem auto 0;
    border: none;
  }
}
</style>
